<template>
   <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
  offset="10"
  :immediate-check="false"
>
    <div v-for="data in $store.state.nowPlayingList" :key="data.filmId" class="films" @click="handleChangPage(data.filmId)">
        <div class="poster"> <img :src="data.poster" /></div>
        <div class="films_info">
            <div class="name">{{data.name}}<span class="item">{{data.item.name}}</span></div>
            <div class="grade">观众评分<span class="grade_Num">{{data.grade}}</span></div>
            <div class="actors">主演：{{Actors(data.actors)}}</div>
            <div class="nation">{{data.nation}}丨{{data.runtime}}分钟</div>
        </div>
        <div class="buy">
        <van-button color="#ff4e32" plain  size="mini">&nbsp;购票&nbsp; </van-button>
        </div>
    </div>
</van-list>
</template>
<script>
export default {
  data () {
    return {
      loading: false,
      finished: false,
      pageNum: 0,
      timeId: null
    }
  },
  mounted () {
    this.$store.commit('nowPlayingData', null)
    this.getData()
  },
  methods: {
    onLoad () {
      clearTimeout(this.timeId)
      this.timeId = setTimeout(() => {
        if (this.$store.state.nowPlayingTotal > this.$store.state.nowPlayingList.length) {
          this.getData()
        } else {
          this.finished = true
        }
      }, 100)
    },
    handleChangPage (id) {
      this.$router.push({ name: 'detial', params: { id: id, location: window.location.pathname } })
    },
    getData () {
      this.pageNum++
      this.$store.dispatch('getAxiosData', {
        url: `https://m.maizuo.com/gateway?cityId=${this.$store.state.city.cityId}&pageNum=${this.pageNum}&pageSize=10&type=1`,
        host: 'mall.film-ticket.film.list',
        fun: 'nowPlayingData'
      })
    }
  },
  computed: {
    Actors () {
      return (data) => {
        if (data) {
          let actorName = ''
          data.forEach(item => {
            actorName += item.name + ' '
          })
          return actorName
        }
        return '暂无主演'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.films{
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    justify-items: center;
    align-items: center;
    color: #666;
    font-size: 13px;
    display: flex;
    .poster{
        flex: 3;
        img{width: 100%}
    }
    .films_info{
        flex: 7;
        box-sizing: border-box;
        padding:0 10px;
        width: 100%;
        .name{
            font-size: 16px;
            color:#000;
            display: flex;
            align-items: center;
            margin-bottom: 5px;
            .item{
                background-color: #ccc;
                color: white;
                padding: 0 3px;
                box-sizing: border-box;
                margin-left: 5px;
                border-radius: 2px;
                font-size: 13px;
            }
        }
        .grade{
            margin-bottom: 2px;
            .grade_Num{
                font-size: 15px;
                color: #ff4e32;
                margin-left: 3px;
            }
        }
        .actors{
            width: 223px;
             overflow: hidden;/*超出部分隐藏*/
            white-space: nowrap;/*不换行*/
            text-overflow:ellipsis;/*超出部分文字以...显示*/
            margin-bottom: 3px;
        }
    }
    .buy{
        flex:2
    }
}
</style>
